<template>
  <div class="good-item-sec">
    <van-grid-item class="good-item">
      <van-image
        class="good-item-img"
        :src="`static/images/goodList/good-item-${data.index}.png`"
        @click="detail"
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20" vertical>加载中...</van-loading>
        </template>
      </van-image>
      <div class="good-item-info">
        <p
          class="good-item-title van-multi-ellipsis--l2"
          v-text="data.title"
        ></p>
        <p class="good-item-price">
          ￥{{ data.price }}
          <span class="good-item-original-price"
            >¥{{ data.originalPrice }}</span
          >
        </p>
        <van-tag
          class="good-item-tag"
          color="#EACCCB"
          text-color="#D34A39"
          size="medium"
          >{{ data.discount }}折优惠</van-tag
        >
        <p class="good-item-want">{{ data.want }}人想买</p>
      </div>
    </van-grid-item>
  </div>
</template>

<script>
export default {
  name: "goodList",
  props: {
    data: { type: Object, default: null }, // 数据列表项
  },
  methods: {
    // 路由跳转，点击商品跳转详情
    detail() {
      this.$router.push({ path: "/goodDetail" }).catch(err => {});
    },
  },
};
</script>

<style lang="less" scoped>
// 商品列表项
/deep/.good-item {
  .van-grid-item__content {
    padding: 10px;
  }
  // 商品图片
  .good-item-img {
    width: 345px;
    height: 345px;
    margin-bottom: 5px;
  }
  // 商品信息
  .good-item-info {
    // 商品名称
    .good-item-title {
      width: 345px;
      height: 60px;
      font-size: 26px;
      line-height: 30px;
      font-weight: 500;
      color: #000;
      margin-bottom: 5px;
    }
    // 商品价格
    .good-item-price {
      font-size: 24px;
      line-height: 30px;
      font-weight: bold;
      color: #ff4634;
      margin-bottom: 5px;
      // 原价
      .good-item-original-price {
        font-size: 22px;
        font-weight: bold;
        text-decoration: line-through;
        color: #000000;
        line-height: 30px;
        opacity: 0.3;
      }
    }
    // 折扣标签
    .good-item-tag {
      padding: 0 10px;
      border-radius: 2px;
      font-size: 18px;
      margin-bottom: 5px;
    }
    // 商品想要人数
    .good-item-want {
      font-size: 20px;
      font-weight: 500;
      color: #000000;
      line-height: 30px;
      opacity: 0.7;
    }
  }
}
</style>
